<template>
	<view class="container">
		<view class="list_tabs">
			<view 
				v-for="(item, index) in tabs" 
				:key="index"
				class="li"
				:class="currentTab == index ? 'current' : ''"
				@click="onTabsClick(index)"
			>
				<text>{{item.name}}</text>
				<view class="line" v-show="currentTab == index"></view>
			</view>
		</view>
		
		<view
			v-for="(tab, tkey) in tabs"
			:key="tkey" 
			v-show="currentTab == tkey"
		>
			<view class="list_sort">
				<view 
					v-for="(list, lkey) in tab.child" 
					:key="lkey"
					class="li"
					:class="tab.currentChild == lkey ? 'current' : ''"
					@click="onSortClick(lkey)"
				>
					<text>{{list.name}}</text>
					<view class="line" v-show="tab.currentChild == lkey"></view>
				</view>
			</view>
			
			<view
				v-for="(list, lkey) in tab.child" 
				:key="lkey"
				v-show="tab.currentChild == lkey"
			>
				<view class="list">
					<view class="li" v-for="(item, index) in list.data" :key="index">
						<view class="con" v-if="list.requestType == 1">
							<view class="row f1">
								<view class="row">
									<text class="p">订单号：{{item.order_sn}}</text>
									
									<button class="btn" @click="onCopyClick(item.order_sn)">复制</button>
								</view>
							</view>
							
							<view class="f2" @click="onGoodClick(item)">
								<image :src="item.itempic" mode="" class="pic"></image>
								
								<view class="cite">
									<text class="name">{{item.title || ''}}</text>
									<text class="time">{{item.add_time}}</text>
								</view>
							</view>
							
							<view class="f3">
								<text class="p">付款金额￥{{item.order_amount}}</text>
								
								<view class="dfn">
									<text class="p">预计返佣</text>
									<text class="p b">{{item.comission_money}}</text>
								</view>
							</view>
						</view>
						
						<view class="con" v-if="list.requestType != 1">
							<view class="row f1">
								<view class="row">
									<text class="p">订单号：{{item.order_sn}}</text>
									
									<button class="btn" @click="onCopyClick(item.order_sn)">复制</button>
								</view>
								
								<text class="status" :class="item.order_status == 7 || item.order_status == 4 || item.order_status == 8 || item.order_status == 3 ? 'i' : ''">{{item.order_status_msg}}</text>
							</view>
							
							<view class="row shop" v-if="item.shop_name">
								<image src="../../../static/fanli/157.png" mode="" class="icon"></image>
								<text>{{item.shop_name}}</text>
							</view>
							
							<view class="f2" @click="onSSGoodClick(item)">
								<image :src="item.goods.goods_image" mode="" class="pic"></image>
								
								<view class="cite">
									<view>
										<text class="name ti0">{{item.goods.goods_name || ''}}</text>
										<text class="spec">{{(item.goods.attr_name)}}</text>
									</view>
									
									<view class="bottom row">
										<text class="price">
											{{'实付金额￥'+item.total_amount}}
										</text>
										<text class="time">x{{item.goods.goods_num}}</text>
									</view>
								</view>
							</view>
							
							<view class="add_time">{{item.create_time}}</view>
							
							<view class="address">
								<view class="row dfn">
									<view class="p">
										{{item.consignee}}
									</view>
									<view class="p">
										{{item.mobile}}
									</view>
								</view>
								
								<view class="row cite">
									<image src="../../../static/fanli/163.png" mode="" class="icon"></image>
									<text>{{item.address}}</text>
								</view>
							</view>
							
							<view class="row f4" v-if="item.shipping_no">
								<view class="row">
									<text class="p">快递：{{item.shipping_name}}</text>
									
									<button class="btn" @click="onCopyClick(item.shipping_name)">复制</button>
								</view>
							</view>
							
							<view class="row f4" v-if="item.admin_note">
								<text class="p">备注：{{item.admin_note}}</text>
							</view>
							
							<view class="row btns">
								<button class="btn row" v-if="item.order_status == 1" @click="onPayClick(item)">去付款</button>
								<button class="btn row" v-if="item.order_status==2 && item.shipping_status==2" @click="onReceivingClick(item)">确认收货</button>
								<button class="btn row cancel" v-if="item.order_status==2 && item.shipping_status==2 && item.shipping_no" @click="onShippingClick(item.shipping_url)">查看物流</button>
								<button class="btn row cancel" v-if="item.order_status==1" @click="onCancelClick(item)">取消订单</button>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<uni-load-more :status="tabs[currentTab].child[tabs[currentTab].currentChild].loadingMore ? 'loading' : ''"></uni-load-more>
	</view>
</template>

<script>
	import { 
		JSMRequest
	} from '@/module/api'
	import { formatDateTime } from '@/common/util'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'
	import uniLoadMore from "@/components/uni-load-more/uni-load-more.vue"
	
	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		components: {
			uniLoadMore
		},
		
		data() {
			return {
				platform:[
					{
						value:'3',
						name:'京东',
						except:'',
						requestType:1,
					},
					{
						value:'1',
						name:'京商盟',
						except:'',
						requestType:2,
					},
				],
				type:[
					[
						{
							value:'1',
							name:'全部'
						},
						{
							value:'2',
							name:'待付款'
						},
						{
							value:'3',
							name:'已付款'
						},
						{
							value:'4',
							name:'已结算'
						},
						{
							value:'5',
							name:'已失效'
						},
					],
					[
						{
							value:'0',
							name:'全部'
						},
						{
							value:'1',
							name:'未付款'
						},
						{
							value:'2',
							name:'待收货'
						},
						{
							value:'3',
							name:'已完成'
						}
					],
				],
				tabs:[],
				requestTab: 0,
				currentTab: 0,
			};
		},
		
		computed: {
			shareAppMessage () {
				return this.$store.state.shareAppMessage
			},
			
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		onLoad() {
			let _t = this
			this.initNavTabs()
			this.onTabsClick(0)
			
			WxNotificationCenter.addNotification("event_refresh_current_order_list", () => {
				let _t = this
				let tabs = this.tabs
				let current = this.currentTab
				let tab = tabs[current]
				let child = tab.child[tab.currentChild]
				
				_.each(tab.child,(v,k)=>{
					v.isEmpty = false
					v.page = 1
					v.loaded = false
					v.data = []
					v.loadingMore = true
				})
				
				child.requestType == 1 ? _t.getPageData() : _t.getSelfShopPageData();
			}, this);
		},
		
		onUnload() {
			WxNotificationCenter.removeNotification("event_refresh_current_order_list", this);
		},
		
		onReachBottom() {
			let _t = this
			let tabs = this.tabs
			let current = this.currentTab
			let tab = tabs[current]
			let child = tab.child[tab.currentChild]
			
			if(child.isEmpty) return false
			if(child.loadingMore) return false
			if(child.refreshing) return false
			if(!child.loaded) return false
			
			child.requestType==1 ? this.getPageData() : this.getSelfShopPageData();
		},
		
		methods:{
			onCancelClick (item) {
				let _t = this
				
				uni.showLoading({
					mask: true,
					title: "请求中..."
				})
				
				JSMRequest({
					tag: "jsm-selt-order-delete",
					method: "POST",
					params: {
						order_id: item.id
					},
				}).then((res) => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: "取消成功"
					})
					WxNotificationCenter.postNotificationName("event_refresh_current_order_list", {})
				}).catch(e => {
					uni.hideLoading()
					uni.showToast({
						icon: "none",
						title: e.msg
					})
				})
			},
			
			onReceivingClick (item) {
				let _t = this
				uni.showModal({
					title: "提示",
					content: "是否确认收货？",
					success: () => {
						
						uni.showLoading({
							mask: true,
							title: "请求中..."
						})
						
						JSMRequest({
							tag: "jsm-selt-order-confirm",
							method: "POST",
							params: {
								order_id: item.id
							},
						}).then((res) => {
							uni.hideLoading()
							uni.showToast({
								icon: "none",
								title: "操作成功"
							})
							WxNotificationCenter.postNotificationName("event_refresh_current_order_list", {})
						}).catch(e => {
							uni.hideLoading()
							uni.showToast({
								icon: "none",
								title: e.msg
							})
						})
					}
				})
			},
			
			onPayClick (item) {
				uni.navigateTo({
					url: "/pages/cart/confirm/confirm?params=" + JSON.stringify({
						type: 'selfSupportOrderlist',
						goodId: null,
						goodName: null,
						goodNumber: 1,
						goodPrice: null,
						cache:{
							orderSn:item.order_sn,
							orderTotal:item.total_amount,
							orderTotalGift:parseFloat(item.gift_card),
							isExchange: false
						}
					})
				})
			},
			
			onShippingClick (str) {
				uni.setClipboardData({
					data: str,
					success: () => {
						uni.showToast({
							icon: "none",
							title: "复制成功，请前往浏览器查看"
						})
					}
				})
			},
			
			onSSGoodClick (item) {
				uni.navigateTo({
					url: "/pageMe/me/order-detail/order-detail?id=" + item.id
				})
			},
			
			onGoodClick (item) {
				uni.navigateTo({
					url: "/pages/home/good-detail/good-detail?id=" + item.itemid
				})
			},
			
			onCopyClick (str) {
				uni.setClipboardData({
					data: str,
					success: () => {
						uni.showToast({
							icon: "none",
							title: "复制成功"
						})
					}
				})
			},
			
			initNavTabs () {
				let _t = this
				let time = new Date().getTime()
				let tabs = []
				let platform = this.platform
				
				_.each(platform,(v,k)=>{
					let child = []
					let type = v.requestType==1?_t.type[0]:_t.type[1]
					
					_.each(type,(vv,kk)=>{
						if(!(v.except.indexOf(vv.value)>-1)){
							child.push({
								requestType:v.requestType,
								id:time+kk,
								name:vv.name,
								type:v.value,
								status:vv.value,
								data:[],
								page:1,
								loaded:false,
								refreshing:false,
								loadingMore:true,
								isEmpty:false,
							})
						}
					})
					
					tabs.push({
						id:time+k,
						name:v.name,
						child:child,
						currentChild:0
					})
				})
				
				this.tabs = tabs
			},
		
			onTabsClick (index) {
				this.currentTab = index
				
				let _t = this
				let tabs = this.tabs
				let current = index
				let tab = tabs[current]
				let child = tab.child[tab.currentChild]
				
				if(!child.loaded){
					child.requestType==1 ? this.getPageData() : this.getSelfShopPageData();
				}
			},
			
			onSortClick (index) {
				let _t = this
				let tabs = this.tabs
				let current = this.currentTab
				let tab = tabs[current]
				
				tab.currentChild = index
				
				let child = tab.child[index]
				
				if(!child.loaded){
					child.requestType==1 ? this.getPageData() : this.getSelfShopPageData();
				}
			},
			
			getPageData () {
				let _t = this
				let tabs = this.tabs
				let current = this.currentTab
				let tab = tabs[current]
				let child = tab.child[tab.currentChild]
				
				JSMRequest({
					tag: "jsm-order-list",
					method: "POST",
					params: {
						page: child.page,
						status: child.status
					},
				}).then((res) => {
					let data = child.page == 1 ? [] : child.data
					
					_.each(res.data, (v, k) => {
						v.rn_order_status = child.status
						data.push(v)
					})
					
					child.data = data
					child.page += 1
					
					child.loaded = true
					child.refreshing = false
					child.loadingMore = false
				}).catch(e => {
					child.isEmpty = true
					child.loadingMore = false
					child.refreshing = false
					
					uni.showToast({
						icon: "none",
						title: e.msg
					})
				})
			},
			
			getSelfShopPageData () {
				let _t = this
				let tabs = this.tabs
				let current = this.currentTab
				let tab = tabs[current]
				let child = tab.child[tab.currentChild]
				
				JSMRequest({
					tag: "jsm-selt-order-list",
					method: "POST",
					params: {
						page: child.page,
						status: child.status
					},
				}).then((res) => {
					let data = child.page == 1 ? [] : child.data
					
					_.each(res.data, (v, k) => {
						v.rn_order_status = child.status
						data.push(v)
					})
					
					child.data = data
					child.page += 1
					
					child.loaded = true
					child.refreshing = false
					child.loadingMore = false
				}).catch(e => {
					child.isEmpty = true
					child.loadingMore = false
					child.refreshing = false
					
					uni.showToast({
						icon: "none",
						title: e.msg
					})
				})
			}
		}
	}
</script>

<style>
	page{
		background: #F2F2F2;
	}
</style>

<style lang="less" scoped>
	.list_tabs{
		display: flex;
		align-items: center;
		background: #FF5757;
		
		.li{
			height: 76px;
			width: 50%;
			position: relative;
			text-align: center;
			
			text{
				color: #FFCBCB;
				font-size: 28px;
				line-height: 76px;
				text-align: center;
			}
			
			.line{
				position: absolute;
				bottom: 6px;
				left: 50%;
				margin-left: -12px;
				height: 4px;
				width: 24px;
				background-color: #fff;
			}
			
			&.current{
				
				text{
					color: #FFFFFF;
				}
			}
		}
	}
	
	.list_sort{
		display: flex;
		align-items: center;
		background: #FFFFFF;
		position: sticky;
		top: 0;
		left: 0;
		z-index: 5;
		
		.li{
			height: 76px;
			width: 25%;
			position: relative;
			text-align: center;
			
			text{
				color: #666;
				font-size: 24px;
				line-height: 76px;
				text-align: center;
			}
			
			.line{
				position: absolute;
				bottom: 6px;
				left: 50%;
				margin-left: -12px;
				height: 4px;
				width: 24px;
				background-color: #FF5757;
			}
			
			&.current{
				
				text{
					color: #FF5757;
				}
			}
		}
	}
	
	.list{
		width: 100%;
		
		.li{
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 30px;
			
			.con{
				width: 690px;
				background: #FFFFFF;
				border-radius: 20px;
				padding: 0 20px;
				box-sizing: border-box;
				
				.row{
					display: flex;
					align-items: center;
				}
				
				.f1{
					height: 80px;
					justify-content: space-between;
					
					.p{
						padding-right: 30px;
						font-size: 24px;
						color: #999999;
					}
					
					.btn{
						width: 72px;
						height: 36px;
						border-radius: 20px;
						border: 1px solid #E7261F;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #FFFFFF;
						font-size: 20px;
						color: #E7261F;
					}
					
					.status{
						font-size: 24px;
						color: #FF2D5E;
						
						&.i{
							color: #999999;
						}
					}
				}
				
				.f2{
					margin-bottom: 10px;
					display: flex;
					justify-content: space-between;
					
					.pic{
						width: 152px;
						height: 152px;
					}
					
					.cite{
						width: 478px;
						height: 152px;
						position: relative;
						display: flex;
						justify-content: space-between;
						flex-direction: column;
						
						.bottom{
							justify-content: space-between;
						}
						
						.price{
							font-size: 24px;
							color: #E7261F;
						}
						
						.icon{
							position: absolute;
							top: 2px;
							left: 0px;
							width: 40px;
						}
						
						.name{
							width: 100%;
							font-size: 26px;
							color: #333;
							text-indent: 50px;
							display: -webkit-box;
							overflow: hidden;
							white-space: normal;
							text-overflow: ellipsis;
							word-wrap: break-word;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							
							&.ti0{
								text-indent: 0px;
							}
						}
						
						.spec{
							font-size: 20px;
							color: #999999;
						}
						
						.time{
							font-size: 24px;
							color: #999999;
						}
					}
				}
				
				.f3{
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 80px;
					padding-bottom: 10px;
					
					.p{
						font-size: 26px;
						color: #333333;
					}
					
					.dfn{
						display: flex;
						align-items: center;
					}
					
					.b{
						color: #E7261F;
					}
				}
				
				.shop{
					margin-bottom: 20px;
					
					.icon{
						width: 32px;
						height: 32px;
						margin-right: 10px;
					}
					
					text{
						font-size: 26px;
						color: #333333;
					}
				}
				
				.add_time{
					padding: 20px 0;
					font-size: 24px;
					color: #999999;
				}
				
				.address{
					padding: 30px 0;
					border-top: 1px solid #eee;
					
					.dfn{
						justify-content: space-between;
						
						.p{
							font-size: 26px;
							color: #333333;
						}
					}
					
					.cite{
						margin-top: 20px;
						
						.icon{
							width: 28px;
							height: 32px;
							margin-right: 10px;
						}
							
						text{
							font-size: 26px;
							color: #333333;
						}
					}
				}
				
				.f4{
					justify-content: space-between;
					padding-bottom: 20px;
					
					.p{
						padding-right: 30px;
						font-size: 24px;
						color: #999999;
					}
					
					.btn{
						width: 72px;
						height: 36px;
						border-radius: 20px;
						border: 1px solid #E7261F;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #FFFFFF;
						font-size: 20px;
						color: #E7261F;
					}
				}
				
				.btns{
					padding-top: 10px;
					padding-bottom: 20px;
					flex-direction: row-reverse;
					
					.btn{
						height: 60px;
						border: 1px solid #E7261F;
						border-radius: 30px;
						padding: 0 20px;
						justify-content: center;
						margin-left: 30px;
						font-size: 24px;
						color: #E7261F;
						background: #FFFFFF;
						
						&.cancel{
							color: #999999;
							border: 1px solid #999999;
						}
					}
				}
			}
		}
	}
</style>
